<template>
  <div id="myDiv" style="width: 100%; height: 420px;">
  </div>
</template>
<script>
import Plotly from 'plotly.js-dist-min';
import {coorData} from "@/views/contour/coor.js"

export default {
  mounted() {
    const layout = {
      title: 'Plotly 等值线带标签示例',
      margin: { t: 40, l: 40, r: 40, b: 40 },
    };
    Plotly.newPlot('myDiv',  [{
      z:coorData.option.series[0].data,
      type: 'contour',
      colorscale: 'Jet',
      name: 'Contour',
      ncontours: 12,     //等值线密度，数值越大密度越高
      coloring: 'fill',     // 'fill' 表示填充颜色，'lines' 表示只画线
      contours: {
        coloring: 'fill',     // 'fill' 表示填充颜色，'lines' 表示只画线
        showlabels: true,     // ✅ 开启标签
        labelfont: {           // 标签字体样式
          size: 12,
          color: 'black'
        }
      }
    }],layout);

  }
}
</script>
<style scoped lang="stylus">

</style>